<template>
	<view class="visitor-container">
		<view class="topBar">
			<view class="topBarL" @click="goAddVisitor()">
				<view class="add">
					<view class="title">				
						<text class="iconfont icon-yuyue"></text>
						<text>访客预约</text>
					</view>
					<view class="arr">
						<text class="iconfont icon-icon-test61"></text>
					</view>
				</view>
				<view class="info">
					凭访客二维码<br/>
					造访社区更便利
				</view>
			</view>	
			<view class="topBarR">
				<view class="history" @click="goHistoryVisitor()">
					<view class="title">
						<text class="iconfont icon-icon-test5"></text>
						<text>访客历史</text>
					</view>
					<view class="arr">
						<text class="iconfont icon-icon-test61"></text>
					</view>
				</view>
				<view class="order" @click="goOrderVisitor()">
					<view class="title">
						<text class="iconfont icon-icon-test39"></text>
						<text>预约记录</text>
					</view>
					<view class="arr">
						<text class="iconfont icon-icon-test61"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="statistics">
			<view class="statisticsL">
				<view class="monthly">
					<view class="monthlyTitle">
						<text class="iconfont icon-icon-test4" style="font-size: 40rpx; margin-right: 10rpx;"></text>
						<text>
							每月数据
						</text>
					</view>
					<view class="monthItem">
						<text>本月来访</text>
						<text>{{visitorStatistical.monthlyStatistics[0] || 0}}</text>
						<text>人</text>
					</view>
					<view class="monthItem">
						<text>上月来访</text>
						<text>{{visitorStatistical.monthlyStatistics[1] || 0}}</text>
						<text>人</text>
					</view>
					<view class="monthItem">
						<text>上上月来访</text>
						<text>{{visitorStatistical.monthlyStatistics[2] || 0}}</text>
						<text>人</text>
					</view>
				</view>
				<view class="next">
					<view class="nextTitle">
						<text class="iconfont icon-kongxian" style="font-size: 30rpx; margin-right: 10rpx;"></text>
						<text style="font-size: 30rpx; font-weight: normal;">
							即将到来：{{visitorStatistical.nextVisitor.visitorName}}
						</text>
					</view>
				</view>
			</view>
			<view class="statisticsR">
				<view class="visitorRank">
					<view class="rankTitle">
						<text class="iconfont icon-icon-test37" style="font-size: 40rpx; margin-right: 10rpx;"></text>
						常来访客
					</view>
					<view class="rankItem" v-for="(item,index) in visitorStatistical.visitorRanking" :key="item.name">
						<text>{{item.name}}</text>
						<text>{{item.num}}</text>
					</view>
					<view class="rankItem3" v-if="test2">
						<text>暂无统计数据，快邀请朋友来家做客吧！</text>
					</view>	
				</view>
			</view>
		</view>
		<view class="recently">
			<view class="recentlyTitle">
				<view class="bottomLine">
					<view class="recentlyTitleL">
						近期访客
					</view>
					<view class="recentlyTitleR" @click="goOrderVisitor()">
						<text>全部</text>
						<text class="iconfont icon-icon-test61"></text>
					</view>
				</view>
			</view>
			<view class="recentlyItemBox">
				<view class="recentlyItem" v-for="(item,index) in recentlyVisitor.list" :key="item.visitorSignkey">
					<view class="recentlyItemL">
						<view class="imgBox">
							<image src="../../static/Icon/visitor/visitor.png" mode=""></image>
						</view>
						<view class="recentlyItemInfo">
							<view class="visitorName">
								<text>
									访客：{{item.visitorName}}
								</text>
							</view>
							<view class="visitorPhone">
								<text>预约时间：{{item.appointment}}</text>
							</view>
						</view>
					</view>
					<view class="recentlyItemR">
						<view class="cancel" @click="goDeatilVisitor(item.visitorSignkey)">
							查看
						</view>
					</view>
				</view>
				<view class="noData" v-if="test">
					<image src="../../static/Icon/index/noData.png" mode=""></image>
					<view>
						暂无访客信息
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				visitorStatistical: {
				  visitorRanking: [
					],
				  monthlyStatistics: [],
				  nextVisitor: {
				    visitorName: '暂无'
				  },
					showNoVisitor: true,
				},
				recentlyVisitor: {
					list:[]
				},
				test: true,
				test2: true,
				showNoRecentVisitor: true,
				userInfo:{}
			};
		},
		onLoad() {
			this.getUserInfo()
		},
		onShow(){
			this.getUserInfo()
		},
		methods:{
			//去添加访客界面
			goAddVisitor(){
				uni.navigateTo({
					url:'./addVisitor/addVisitor'
				})
			},
			//去访客历史界面
			goHistoryVisitor(){
				uni.navigateTo({
					url:'./historyVistor/historyVistor'
				})
			},
			//去预约记录界面
			goOrderVisitor(){
				uni.navigateTo({
					url:'orderRecordVisitor/orderRecordVisitor'
				})
			},
			//去访客二维码界面
			goDeatilVisitor(visitorSignkey){
				uni.navigateTo({
					url:'./qrCodeVisitor/qrCodeVisitor?visitorSignkey='+visitorSignkey,
					fail: (err) => {
						console.log(err)
					}
				})
			},
			//获得统计数据
			getVisitorStatistical(ownerSignkey){
				this.$myReq({
					url: `/owner/visitor/getVisitorStatistical/${ownerSignkey}`
				})
				.then((res) => {
					this.visitorStatistical.visitorRanking = res.data.visitorRanking
					this.visitorStatistical.monthlyStatistics = res.data.monthlyStatistics
					if(res.data.nextVisitor != null){
						this.visitorStatistical.nextVisitor = res.data.nextVisitor
					}
					if(res.data.visitorRanking.length != 0){
						this.test2 = false
					}
				})
				.catch((err) => {
					console.log(err)
				})
			},
			
			//获得近期访客
			getRecentlyVisitor(ownerSignkey){
				this.$myReq({
					url:`/owner/visitor/tomorrowVisitorPageList/${ownerSignkey}/1/4`,
					method:'POST'
				})
				.then((res) => {
					this.recentlyVisitor.list = res.data.records
					if(res.data.records.length > 0){
						this.test = false
					}else{
						this.test = true
					}
				})
			},
			
			//获得用户信息
			getUserInfo(){
				const token = uni.getStorageSync("userToken")
				// console.log(token)
				this.$myReq({
					url: '/owner/login/loginUserInfo/' + token,
					method:'GET'
				})
				.then((res) => {
					// console.log(res)
					this.userInfo = res.data
					this.getVisitorStatistical(res.data.signKey)
					this.getRecentlyVisitor(res.data.signKey)
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f6f6f6;
}
.topBar{
	padding: 20rpx 30rpx 20rpx 30rpx;
	// border: 1px solid red;
	// 690
	// height: 200rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	.topBarL{
		width: 360rpx;
		border-radius: 30rpx;
		background-color: $main-colorB;
		.add{
			padding: 30rpx 35rpx 20rpx 35rpx;
			color: #000000;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.title{
				// border: 1px solid blue;
				height: 60rpx;
				color: #FFFFFF;
				font-weight: bolder;
				text{
					line-height: 60rpx;
					font-size: 40rpx;
				}
				text:nth-child(1){
					margin-right: 10rpx;
				}
			}
			.arr{
				// border: 1px solid blue;
				height: 60rpx;
				text{
					color: #FFFFFF;
					font-weight: bolder;
					line-height: 60rpx;
					font-size: 40rpx;
				}
			}
		}
		.info{
			padding: 0rpx 35rpx 30rpx 35rpx;
			font-size: 27rpx;
			// border: 1px solid red;
			color: #e1e1e1;
		}
	}
	.topBarR{
		width: 310rpx;
		display: flex;
		flex-flow: column;
		justify-content: space-between;
		// border: 1px solid red;
		// height: 150rpx;
		.history{
			height: 95rpx;
			background-color: #09BE4F;			
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 0rpx 30rpx;
			align-items: center;
			border-radius: 20rpx;
			.title{
				// border: 1px solid blue;
				height: 60rpx;
				color: #FFFFFF;
				font-weight: bolder;
				text{
					line-height: 60rpx;
					font-size: 30rpx;
				}
				text:nth-child(1){
					margin-right: 10rpx;
				}
			}
			.arr{
				// border: 1px solid blue;
				height: 60rpx;
				text{
					color: #FFFFFF;
					font-weight: bolder;
					line-height: 60rpx;
					font-size: 30rpx;
				}
			}
		}
		.order{
			height: 95rpx;
			background-color: #6831FF;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 0rpx 30rpx;
			align-items: center;
			border-radius: 20rpx;
			.title{
				// border: 1px solid blue;
				height: 60rpx;
				color: #FFFFFF;
				font-weight: bolder;
				text{
					line-height: 60rpx;
					font-size: 30rpx;
				}
				text:nth-child(1){
					margin-right: 10rpx;
				}
			}
			.arr{
				// border: 1px solid blue;
				height: 60rpx;
				text{
					color: #FFFFFF;
					font-weight: bolder;
					line-height: 60rpx;
					font-size: 30rpx;
				}
			}
		}
	}
}
.statistics{
	// border: 1px solid red;
	padding: 0rpx 30rpx 20rpx 30rpx;
	height: 380rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	.statisticsL{
		width: 360rpx;
		// border: 1px solid blue;
		display: flex;
		flex-flow: column;
		justify-content: space-between;
		.monthly{
			padding: 20rpx 30rpx 10rpx 30rpx;
			// border: 1px solid red;
			border-radius: 20rpx;
			background-color: #f39200;
			color: #FFFFFF;
			.monthlyTitle{
				font-size: 40rpx;
				font-weight: bolder;
				margin-bottom: 20rpx;
			}
			.monthItem{
				margin-bottom: 10rpx;
				text:nth-child(2){
					margin-left: 10rpx;
					margin-right: 10rpx;
					font-weight: bold;
				}
				text:nth-child(3){
					font-size: 30rpx;
				}
			}
		}
		.next{
			padding: 20rpx 30rpx 20rpx 30rpx;
			// border: 1px solid red;
			display: flex;
			align-items: center;
			background-color: #19be6b;
			border-radius: 20rpx;
			height: 60rpx;
			.nextTitle{
				font-size: 35rpx;
				font-weight: bold;
				color: #FFFFFF;
				// border: 1px solid blue;
			}
		}
	}
	.statisticsR{
		width: 305rpx;
		border-radius: 20rpx;
		background-color: #2a3297;
		border: 1px solid blue;
		color: #FFFFFF;
		// padding: 20rpx 30rpx;
		.visitorRank{
			padding: 20rpx 30rpx 10rpx 30rpx;
			.rankTitle{
				font-size: 40rpx;
				font-weight: bolder;
				margin-bottom: 20rpx;
			}
			.rankItem{
				text{
					margin-right: 20rpx;
				}
				font-size: 30rpx;
				margin-bottom: 15rpx;
			}
		}
	}
}
.recently{
	background-color: #FFFFFF;
	margin: 0rpx 30rpx;
	border-radius: 20rpx;
	box-shadow: 1rpx 1rpx 4rpx 4rpx #e1e1e1;
	.recentlyTitle{
		padding: 0rpx 30rpx;
		.bottomLine{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			border-bottom: 2rpx solid #e1e1e1;
			height: 90rpx;
			.recentlyTitleL{
				// width: 200rpx;
				font-size: 35rpx;
				font-weight: bold;
				line-height: 90rpx;
				border-bottom: 4rpx solid $main-colorB;
			}
			.recentlyTitleR{
				font-size: 35rpx;
				line-height: 100rpx;
				color: $main-garyB;
			}
		}
	}
	.recentlyItemBox{
		padding: 10rpx 30rpx;
		.recentlyItem{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			border-bottom: 2rpx solid #ececec;
			padding:10rpx 0rpx 10rpx 0rpx;
			.recentlyItemL{
				display: flex;
				flex-wrap: wrap;
				
				.imgBox{
					// border: 1px solid red;
					display: flex;
					align-items: center;
					image{
						width: 70rpx;
						height: 70rpx;
						margin-right: 30rpx;
						
					}
				}
				.recentlyItemInfo{
					// border: 1px solid red;
					.visitorName{
						// font-size: 30rpx;
						margin-bottom: 5rpx;
						text:nth-child(1){
							margin-right: 20rpx;
						}
					}
					.visitorPhone{
						font-size: 30rpx;
						color: $main-garyB;
					}
				}
			}
			.recentlyItemR{
				
				display: flex;
				align-items: center;
				.cancel{
					text-align: center;
					line-height: 60rpx;
					border-radius: 10rpx;
					background-color: #dadada;
					// border: 1px solid #919191;
					color: #3b3b3b;
					font-size: 30rpx;
					width: 120rpx;
					height: 60rpx;
				}
			}
		}
	}
	.noData{
		margin: 0 auto;
		width: 250rpx;
		margin-bottom: 40rpx;
		image{
			width: 250rpx;
			height: 250rpx;
		}
		view{
			text-align: center;
			color: $main-garyB;
		}
	}
}
</style>
